<template>
  <section class="search">
      <div class="wrapper">
        <form action="#" method="post">
          <input type="text" id="search" name="search" placeholder="What are you looking for?"  autocomplete="off"/>
          <input type="submit" id="submit_search" name="submit_search"/>
        </form>
        <a href="#" class="advanced_search_icon" id="advanced_search_btn" @click="clickAdvancedSearchIcon"></a>
      </div>
      <div class="advanced_search">
        <div class="wrapper">
          <span class="arrow"></span>
          <form action="#" method="post">
            <div class="search_fields">
              <input type="text" class="float" id="check_in_date" name="check_in_date" placeholder="Check In Date"  autocomplete="off">

              <hr class="field_sep float"/>

              <input type="text" class="float" id="check_out_date" name="check_out_date" placeholder="Check Out Date"  autocomplete="off">
            </div>
            <div class="search_fields">
              <input type="text" class="float" id="min_price" name="min_price" placeholder="Min. Price"  autocomplete="off">

              <hr class="field_sep float"/>

              <input type="text" class="float" id="max_price" name="max_price" placeholder="Max. price"  autocomplete="off">
            </div>
            <input type="text" id="keywords" name="keywords" placeholder="Keywords"  autocomplete="off">
            <input type="submit" id="submit_search" name="submit_search"/>
          </form>
        </div>
      </div><!--  end advanced search section  -->
    </section><!--  end search section  -->
</template>

<script>
  import $ from 'jquery';
  export default {
    methods: {
      clickAdvancedSearchIcon(e) {
        e.preventDefault();
        const ads_box = $('.advanced_search');
        if(!ads_box.hasClass('advanced_displayed')){
          $(this).addClass('active');
          ads_box.stop().fadeIn(200).addClass('advanced_displayed');
        }else{
          $('#advanced_search_btn').removeClass('active');
          ads_box.stop().fadeOut(200).removeClass('advanced_displayed');
        }
      }
    }
  }
</script>

<style scoped>

</style>